<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>智能居家健康伴侣 · Web</title>
  <meta name="color-scheme" content="light dark">
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <header class="site-header">
    <div class="brand">
      <div class="logo" aria-hidden="true">🏠</div>
      <div>
        <h1>智能居家健康伴侣</h1>
        <p>跨端体验 · Web 预览版</p>
      </div>
    </div>
    <nav class="actions">
      <button id="toggle-theme" class="ghost-btn" aria-label="切换主题">切换主题</button>
    </nav>
  </header>

  <main class="container">
    <section class="grid">
      <!-- 环境监测 -->
      <article class="card" id="env-card">
        <div class="card-head gradient-green">
          <h2>环境监测</h2>
          <p>温湿度与空气质量实时概览</p>
        </div>
        <div class="card-body">
          <div class="metrics">
            <div class="metric">
              <span class="label">温度</span>
              <span class="value" id="env-temp">--°C</span>
              <div class="bar"><div id="bar-temp"></div></div>
            </div>
            <div class="metric">
              <span class="label">湿度</span>
              <span class="value" id="env-hum">--%</span>
              <div class="bar"><div id="bar-hum"></div></div>
            </div>
            <div class="metric">
              <span class="label">PM2.5</span>
              <span class="value" id="env-pm">-- μg/m³</span>
              <div class="bar"><div id="bar-pm"></div></div>
            </div>
          </div>
          <div class="chips" id="env-chips"></div>
        </div>
      </article>

      <!-- 用药管理 -->
      <article class="card" id="med-card">
        <div class="card-head gradient-blue">
          <h2>用药管理</h2>
          <p>设置药品、剂量与间隔时间</p>
        </div>
        <div class="card-body">
          <form id="med-form" class="form">
            <label>
              <span>药品名称</span>
              <input type="text" id="drugName" placeholder="如：阿司匹林" required />
            </label>
            <label class="two">
              <span>剂量</span>
              <input type="number" id="dose" placeholder="100" step="0.5" min="0" required />
            </label>
            <label class="two">
              <span>单位</span>
              <input type="text" id="unit" placeholder="mg/片" required />
            </label>
            <label class="two">
              <span>间隔（小时）</span>
              <input type="number" id="interval" placeholder="8" min="1" required />
            </label>
            <label class="two">
              <span>开始时间（HH:mm）</span>
              <input type="time" id="startTime" required />
            </label>
            <div class="row">
              <button type="submit" class="primary">保存计划</button>
              <button type="button" id="loadPlan" class="ghost">加载计划</button>
            </div>
          </form>
          <div class="summary" id="med-summary">今日用药：未设置</div>
          <div class="remind" id="med-reminders" aria-live="polite"></div>
        </div>
      </article>

      <!-- 跌倒检测 -->
      <article class="card" id="fall-card">
        <div class="card-head gradient-orange">
          <h2>跌倒检测</h2>
          <p>状态联动与模拟告警</p>
        </div>
        <div class="card-body">
          <div class="status">
            <span class="dot" id="fall-dot"></span>
            <span id="fall-text">状态：未检测到跌倒</span>
          </div>
          <div class="row">
            <button class="ghost" data-fall="normal">模拟：正常</button>
            <button class="ghost" data-fall="suspected">模拟：疑似</button>
            <button class="danger" data-fall="confirmed">模拟：确认</button>
          </div>
        </div>
      </article>

      <!-- AI话疗 -->
      <article class="card" id="therapy-card">
        <div class="card-head gradient-purple">
          <h2>AI话疗</h2>
          <p>温柔陪伴 · 简易对话演示</p>
        </div>
        <div class="card-body">
          <div class="chat" id="chat-box" aria-live="polite">
            <div class="bubble bot">你好呀～我是你的居家健康小助手，有什么想聊的吗？</div>
          </div>
          <div class="row">
            <input id="chat-input" type="text" placeholder="输入你的话…" />
            <button id="chat-mic" class="ghost" title="语音输入" aria-label="语音输入">🎤</button>
            <button id="chat-send" class="primary">发送</button>
          </div>
<<<<<<< HEAD
=======
          <div class="row" style="justify-content:flex-end; margin-top:8px;">
            <a href="http://127.0.0.1:8001/" target="_blank" class="ghost" style="text-decoration:none; padding:8px 10px; border:1px solid var(--border-color); border-radius:8px;">打开跌倒可视化面板 ↗</a>
          </div>
>>>>>>> d690509e0ca5d8a10e2d83664566037a14849c2c
        </div>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <small>© 2025 居家健康 · Web 预览。此页面用于设计与交互演示，非医疗建议。</small>
  </footer>

  <script src="./app.js" defer></script>
</body>
</html>